<template>
	<view class="categoryIII">
		<scroll-view scroll-y class="content" @scroll="scroll" :scroll-into-view="scrollInToID">
			<view class="item-wrapper" :id="item.name" v-for="(item,index) in list" :key="index">
				<view class="title">
					{{ item.name }}
				</view>
				<view class="item-list">
					<view class="item" :class="{'current':items.checked}" @click="setItem(items)"
						v-for="(items,indexs) in item.list" :key="indexs">
						<text>{{ items.name }}</text>
						<image v-if="items.checked" src="../../static/image/checked-icon.png" class="icon"
							mode="widthFix"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="nav-wrapper" id="nav">
			<view class="item" :class="{'current':currentIndex === index}" @click="navClick(item,index)"
				v-for="(item,index) in list" :key="index">
				{{ item.name }}
			</view>
		</view>
		<view class="tool-tip" v-if="scrollClick">
			{{ scrollInToID }}
		</view>
		<view class="submit-btn" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollInToID: '',
				currentIndex: 0,
				scrollHeightList: [],
				scrollClick: false,
				list: [],
				to: "",
			}
		},
		onLoad(option) {
			this.to = option.to;
		},
		onNavigationBarButtonTap() {
			var pages = getCurrentPages();
			var prevPage = pages[pages.length - 2];
			if (prevPage == undefined || prevPage == null) return;
			const list = [];
			this.list.forEach(item => {
				item.list.forEach(items => {
					if (items.checked) {
						list.push(items)
					}
				})
			})
			prevPage.$vm.changeItem({
				parentId: uni.getStorageSync("categoryII").id,
				list: list
			});
			uni.navigateBack();
		},
		mounted() {
			// const uniDom = uni.createSelectorQuery().in(this);
			// uniDom.selectAll('.item-wrapper').boundingClientRect().exec(ret => {
			// 	const doms = ret[0];
			// 	let height = 0;
			// 	for(let i = 0;i < doms.length; i++){
			// 		height += doms[i].height
			// 		this.scrollHeightList.push(height)
			// 	}
			// })
			this.setCategoryIIIList();
		},
		methods: {
			navClick(item, index) {
				this.scrollClick = true;
				this.currentIndex = index;
				this.scrollInToID = item.name
				uni.vibrateShort()
				setTimeout(() => {
					this.scrollClick = false;
				}, 500)
			},
			scroll(e) {
				if (this.scrollClick) return
				const list = this.scrollHeightList;
				for (var i = 0; i < list.length; i++) {
					if (list[i] >= e.detail.scrollTop) {
						this.currentIndex = i;
						break;
					}
				}
			},
			setCategoryIIIList() {
				this.list = [];
				const categoryIIList = uni.getStorageSync("categoryII").children;
				let obj = {
					list: [],
					name: ''
				};
				const array = [];
				categoryIIList.sort((a, b) => {
					return a.initial.localeCompare(b.initial)
				})
				categoryIIList.forEach((item, index) => {
					if (!obj.name) {
						obj.name = item.initial.substring(0, 1);
						obj.list.push(item)
					} else if (obj.name === item.initial.substring(0, 1)) {
						obj.list.push(item)
						// if(index === categoryIIList.length - 1){
						// 	array.push({
						// 		...obj
						// 	});
						// }
					} else {
						array.push({
							...obj
						});
						obj.list = [];
						obj.name = item.initial.substring(0, 1);
						obj.list.push(item);
					}
					if (index === categoryIIList.length - 1) {
						array.push({
							...obj
						});
					}
				})
				this.list = array;
				//console.log(array)
				this.scrollInToID = array[0].name;
				this.$nextTick(() => {
					const uniDom = uni.createSelectorQuery().in(this);
					uniDom.selectAll('.item-wrapper').boundingClientRect().exec(ret => {
						const doms = ret[0];
						let height = 0;
						for (let i = 0; i < doms.length; i++) {
							height += doms[i].height
							this.scrollHeightList.push(height)
						}
					})
				})
			},
			setItem(item) {
				item.checked = !item.checked
				// item.categoryIdI = uni.getStorageSync("categoryIII").categoryIdI;
				// item.categoryNameI = uni.getStorageSync("categoryIII").categoryNameI;
				// item.categoryIdIi = uni.getStorageSync("categoryIII").categoryIdIi;
				// item.categoryNameIi = uni.getStorageSync("categoryIII").categoryNameIi;
				// item.categoryIdIii = item.id;
				// item.categoryNameIii = item.name;
			},
			submit() {
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2];
				if (prevPage == undefined || prevPage == null) return;
				const list = [];
				this.list.forEach(item => {
					item.list.forEach(items => {
						if (items.checked) {
							list.push(items)
						}
					})
				})
				prevPage.$vm.changeItem({
					parentId: uni.getStorageSync("categoryII").id,
					list: list
				});
				uni.navigateBack();
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.categoryIII {
		height: 100%;
		padding-bottom: 105rpx;
		background-color: #ffffff;

		.content {
			height: 100%;
			background-color: #ffffff;
			position: relative;
			padding: 20upx 40upx 20upx 20upx;

			.item-wrapper {
				.title {
					height: 50upx;
					display: flex;
					align-items: center;
					background-color: #ffffff;
					position: sticky;
					top: 0;
					font-weight: bold;
					font-size: 30upx;
					margin-bottom: 20upx;
				}

				.item-list {
					display: flex;
					flex-wrap: wrap;

					.item {
						border: 2upx solid #cecece;
						font-size: 28upx;
						padding: 15upx 40upx;
						border-radius: 10upx;
						margin-bottom: 20upx;
						margin-right: 20upx;
						position: relative;
						overflow: hidden;

						&.current {
							border-color: #555BFF;
							color: #555BFF;
							background-color: #555BFF22;
						}

						.icon {
							width: 36upx;
							//height: 24upx;
							position: absolute;
							bottom: 0upx;
							right: 0upx;
						}
					}
				}
			}
		}

		.nav-wrapper {
			position: fixed;
			width: 40upx;
			background-color: #F0F0F0;
			right: 10upx;
			top: 50%;
			transform: translateY(-50%);
			// padding: 40upx 0;
			border-radius: 20upx;
			z-index: 9;

			.item {
				text-align: center;
				width: 40upx;
				height: 40upx;
				line-height: 40upx;
				font-size: 28upx;
				margin: 10upx 0;

				&.current {
					background-color: #555BFF;
					color: #ffffff;
					border-radius: 50%;
				}
			}
		}

		.tool-tip {
			position: fixed;
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, .6);
			color: #ffffff;
			font-size: 56upx;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.submit-btn {
			position: fixed;
			width: 100%;
			height: 100upx;
			background-color: #555BFF;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			bottom: 0;
		}
	}
</style>